<template>
	<!-- 资讯发布 -->
	<view class="">
		<view class="status_bar"></view>
		<u-navbar
			title="资讯发布"
			@leftClick="toBack"
			:bgColor="'#CF1526'"
			leftIconColor="#ffffff"
			titleStyle="color:#ffffff"
			:safeAreaInsetTop="true"
			:placeholder="true"
		></u-navbar>
		<view class="h4 bg-white container form_warp">
			<u--form labelPosition="left" :model="infoFrom" ref="infoFrom" labelWidth="100" :rules="rules">
				<u-form-item label="资讯标题" prop="title" borderBottom>
					<u--input v-model="infoFrom.title" maxlength="200" border="none" placeholder="请编辑"></u--input>
				</u-form-item>
				<!-- <view class="img_warp">
					<u-form-item label="资讯图片" prop="img_path" borderBottom>
						<view class="upload_img_box py-2">
							<u-upload
								:fileList="infoFrom.img_path"
								capture="['album', 'camera']"
								uploadIcon="plus"
								uploadIconColor="#fff"
								width="105"
								height="70"
								@afterRead="afterRead"
								@delete="deletePic"
								name="1"
								multiple
								:maxCount="3"
							></u-upload>
						</view>
					</u-form-item>
				</view> -->
				<u-form-item label="发布时间" prop="add_time" borderBottom>
					<view class="flex justify-end" @click="dataShow = true">
						<view class="font" style="color: #c0c4cc;" v-if="!infoFrom.add_time">请选择</view>
						<view v-else class="font">{{ infoFrom.add_time }}</view>
					</view>
				</u-form-item>
				<u-calendar :show="dataShow" mode="single" :safe-area-inset-bottom="true" @confirm="dataConfirm" @close="dataShow = false"></u-calendar>
				<u-form-item label="资讯来源" prop="source" borderBottom>
					<u--input v-model="infoFrom.source" maxlength="50" border="none" placeholder="请编辑"></u--input>
				</u-form-item>
				<u-form-item label="资讯正文" prop="content">
					<view class="flex justify-end" @click="editShow = true">
						<view class="font" style="color: #c0c4cc;">请编辑</view>
						<u-icon color="#666666" name="arrow-right"></u-icon>
					</view>
				</u-form-item>
				<view v-if="infoFrom.content" class="cont_warp view"><u-parse :content="infoFrom.content"></u-parse></view>
			</u--form>
		</view>
		<view class="bottom_btn"><button class="h4 text-white rounded-0" @click="submit">确认发布</button></view>
		<view class="edit_warp bg-white fixed-top" v-if="editShow"><parse-edit :html="infoFrom.content" @getHtml="getHtml" @editBack="editBack"></parse-edit></view>
	</view>
</template>

<script>
import { Infoadd, InfoEditInfo, InfoEdit } from '@/api/my/publish.js';
import { uploadImage } from '@/api/common.js';
import parseEdit from './product_img_edit.vue';
import { baseUrl } from '@/util/api.js';
export default {
	components: { parseEdit },
	data() {
		return {
			infoFrom: {
				title: '', //资讯标题
				add_time: '', //发布时间
				content: '', //资讯内容
				img_path: [], //图片
				source: '' //来源
			},
			infoId: '',
			rules: {
				title: [
					{
						type: 'string',
						required: true,
						message: '请输入资讯标题',
						trigger: ['blur', 'change']
					}
				]
			},
			editShow: false,
			backStop: false,
			dataShow: false
		};
	},
	onLoad(option) {
		// console.log("option",option);
		// 回显
		if (option.id) {
			this.infoId = option.id;
			this.getInfo();
		}
	},
	methods: {
		// 获取编辑回显信息
		getInfo() {
			let msg = {
				token: uni.getStorageSync('userInfo').token || '',
				id: this.infoId
			};
			InfoEditInfo(msg)
				.then(res => {
					// console.log(res);
					if (res.code == 0) {
						this.infoFrom = { ...this.infoFrom, ...res.vo };
						// if (res.vo.img_path) {
						// 	this.infoFrom.img_path = res.vo.img_path.map(item => ({ url: item }));
						// } else {
						// 	this.infoFrom.img_path = [];
						// }
					} else {
						uni.$u.toast(res.msg);
					}
				})
				.catch(err => {
					console.log('获取图文详情失败', err);
				});
		},
		submit() {
			this.$refs.infoFrom
				.validate()
				.then(res => {
					// let imgPath = JSON.parse(JSON.stringify(this.infoFrom.img_path));
					if (this.infoId) {
						// console.log('编辑');
						// 编辑
						let msg = {
							token: uni.getStorageSync('userInfo').token || '',
							id: this.infoId,
							// img_path: imgPath ? imgPath.map(item => item.url) : [],
							...this.infoFrom
						};
						InfoEdit(msg)
							.then(res => {
								uni.$u.toast(res.msg);
								if (res.code == 0) {
									setTimeout(() => {
										uni.navigateTo({
											url: '../index?tab=' + 3
										});
									}, 500);
								}
							})
							.catch(err => {
								console.log('编辑失败', err);
							});
					} else {
						// 发布
						let msg = {
							token: uni.getStorageSync('userInfo').token || '',
							...this.infoFrom
							// img_path: imgPath ? imgPath.map(item => item.thumb) : []
						};
						Infoadd(msg)
							.then(res => {
								uni.$u.toast(res.msg);
								if (res.code == 0) {
									setTimeout(() => {
										uni.navigateTo({
											url: '../index?tab=' + 3
										});
									}, 500);
								}
							})
							.catch(err => {
								console.log('发布失败', err);
							});
					}
				})
				.catch(errors => {
					uni.$u.toast('请正确填写资讯信息', errors);
				});
		},
		// 删除图片
		deletePic(event) {
			this.infoFrom.img_path.splice(event.index, 1);
		},
		// 新增图片
		async afterRead(event) {
			// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file);
			let fileListLen = this.infoFrom.img_path.length;
			lists.map(item => {
				this.infoFrom.img_path.push({
					...item,
					status: 'uploading',
					message: '上传中'
				});
			});
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i]);
				let item = this.infoFrom.img_path[fileListLen];
				this.infoFrom.img_path.splice(
					fileListLen,
					1,
					Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					})
				);
				fileListLen++;
			}
		},
		uploadFilePromise(e) {
			return new Promise((resolve, reject) => {
				uni.uploadFile({
					url: baseUrl + '/model/common/layer_upload_img',
					filePath: e.url,
					name: 'file',
					formData: e,
					success: res => {
						setTimeout(() => {
							resolve(JSON.parse(res.data).img);
						}, 1000);
					}
				});
			});
		},
		// 选择时间
		dataConfirm(e) {
			// console.log('选择日期', e);
			this.infoFrom.add_time = e[0];
			this.dataShow = false;
		},
		// 编辑返回
		editBack(val) {
			this.editShow = val;
		},
		// 编辑完成的内容
		getHtml(val) {
			this.infoFrom.content = JSON.parse(decodeURIComponent(val));
			this.editShow = false;
		},
		// 返回监听
		toBack() {
			uni.navigateBack({
				delta: 1
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.status_bar {
	height: var(--status-bar-height);
	width: 100%;
}
/*  #ifdef MP-WEIXIN */
.form_warp {
	margin-top: -25rpx;
}
/*  #endif  */
.cont_warp {
	padding-bottom: 100rpx;
}
.upload_img_box {
	width: 100%;
	// margin-top: 100rpx;
}
.bottom_btn {
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	button {
		height: 98rpx;
		background-color: $color14;
		line-height: 98rpx;
	}
}
.edit_warp {
	width: 100%;
	height: 100%;
	min-height: 100vw;
	z-index: 100;
	// /*  #ifdef MP-WEIXIN  */
	// top: 180rpx;
	// /*  #endif  */
	// /*  #ifdef H5 */
	// top: 44rpx;
	// /*  #endif  */
}

::v-deep .u-upload__wrap__preview {
	margin: 0;
}
::v-deep .uni-input-input {
	text-align: right;
	color: #666666;
}
::v-deep .uni-input-placeholder {
	text-align: right;
}
::v-deep .u-form-item__body__right__message {
	text-align: right;
}
::v-deep .u-form-item__body__right__content__slot {
	justify-content: flex-end;
	padding-right: 20rpx;
}
::v-deep .u-input__content__field-wrapper__field {
	text-align: right !important;
}
::v-deep .img_warp .u-form-item__body {
	display: block !important;
}
</style>
